<template>
	<div class="payment-success">
		<h1 class="title">支付成功</h1>
		<p>感谢您的购买！</p>
		<img src="../assets/done.png" alt="   感谢您的购买" class="image" />
		<div class="order-details">
			<h2>客官，好吃再来</h2>
		</div>
		<button @click="goToHome">返回首页</button>
	</div>
</template>

<script>
	export default {
		data() {
		},
		methods: {
			goToHome() {
				// 导航回首页
				this.$router.push('/index');
			}
		}
	};
</script>

<style scoped>
	
	.payment-success {
		text-align: center;
		padding: 2vw;
	}

	.title {
		font-size: 5vw;
		/* Use vw for font size */
	}

	.payment-success img {
		max-width: 80%;
		/* Adjust the image's max-width as needed */
		height: auto;
		display: block;
		margin: 30vw auto;
		/* Use vw for margin */
	}

	/* 添加顶部间距 */
	.order-details {
		margin-top: 2vw;
		/* Use vw for margin */
		position: absolute;
		bottom: 20vw;
		/* Use vw for distance from bottom */
		left: 50%;
		transform: translateX(-50%);
	}

	button {
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 15px;
		padding: 1vw 5vw;
		/* Use vw for padding */
		cursor: pointer;
		position: absolute;
		bottom: 5vw;
		/* Use vw for distance from bottom */
		left: 50%;
		transform: translateX(-50%);
	}
</style>